<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>持明法洲登录页面</title>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
		<script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
		<script src="${pageContext.request.contextPath}/js/echarts.js"></script>
		<script src="${pageContext.request.contextPath}/js/china.js"></script>
		<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
	</head>
	
	<body class="layui-layout-login">

	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="main" style="width: 600px;height:400px;"></div>

	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="main1" style="width: 600px;height:400px;"></div>


	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="china" style="width: 600px;height:400px;"></div>


	<script>
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 基于准备好的dom，初始化echarts实例
		var myChart1 = echarts.init(document.getElementById('main1'));


		var myChina = echarts.init(document.getElementById('china'));

		$(function () {
			$.ajax({
				url:"${pageContext.request.contextPath}/user/selectAllCountByThread",
				success:function (data) {
					// 指定图表的配置项和数据
					// 用户男女人数对比


					var option = {
						// 图表的标题
						title: {
							text: '用户男女人数对比'
						},
						// 工具栏
						tooltip: {},
						// legend 传奇 数学 系列
						// 在图表中展示的数据类型  例如：衬衫显示y轴 15 这个是15代表什么
						// 销量就是一种类型
						legend: {
							data:['人数']
						},
						// x轴坐标
						xAxis: {
							data: ["女","男"]
						},
						// y轴坐标 不需要定义 会自动识别
						yAxis: {},
						// 给x轴坐标赋值
						series: [{
							// 对应的是legend中的data 必须一样
							name: '人数',
							// type图表要展示的样式 bar柱状图 line折线图
							type: 'bar',
							// data x轴坐标对应的数据
							data: data.sex
						}]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);



					var option3 = {
						title : {
							text: '用户地区分布',
							left: 'center'
						},
						tooltip : {
							trigger: 'item'
						},
						legend: {
							orient: 'vertical',
							left: 'left',
							data:['用户人数']
						},
						visualMap: {
							min: 0,
							max: 100000,
							left: 'left',
							top: 'bottom',
							text:['高','低'],           // 文本，默认为数值文本
							calculable : true
						},
						toolbox: {
							show: true,
							orient : 'vertical',
							left: 'right',
							top: 'center',
							feature : {
								mark : {show: true},
								dataView : {show: true, readOnly: false},
								restore : {show: true},
								saveAsImage : {show: true}
							}
						},

						series : [
							{
								name: '用户人数',
								type: 'map',
								mapType: 'china',
								roam: false,
								label: {
									normal: {
										show: false
									},
									emphasis: {
										show: true
									}
								},
								// 通过ajax获取后台数据 赋值到data的位置
								// 响应数据类型 List<Map>  分组查询查询每个省份的人数.

								data: data.province
							}
						]
					};
					myChina.setOption(option3);



					var option1 = {
						title: {
							text: '三周内容用户注册量变化'
						},
						tooltip: {},
						legend: {
							data:['注册量']
						},
						xAxis: {
							data: ["前一周","前两周","前三周"]
						},
						yAxis: {},
						series: [{
							name: '注册量',
							type: 'line',
							// data x轴坐标对应的数据
							data: data.week
						}]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart1.setOption(option1);

				}
			})
		})





		</script>
	</body>

</html>
